<%--
  Created by IntelliJ IDEA.
  User: EdmundEoEo
  Date: 2022/11/22
  Time: 0:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>
    <title>商城</title>

    <style type="text/css">

        /* 获取页面中所以标签，清除自带内外边距 */
        *{
            margin: 0;
            padding: 0;
        }
        /* 获取页面中所有a标签 清除下划线  列表样式
        ==取消 */
        a{
            text-decoration: none;
            color: black;
        }
        /* 获取页面中所有列表标签， 去掉小圆点，序号 */
        li{
            list-style: none;
        }
        /* 获取页面中所有的图片标签，去边框  在ie浏览器中， 如果图片在a标签中，ie会给图片加边框 */
        img{
            border: none;
        }
        /* 获取页面所有的输入框，下拉列表，文本域， 去掉外发光（外轮廓）===表单所用（登录注册搜索） */
        input,select,textarea{
            outline: none;
        }

        body{
            font-family: '微软雅黑','宋体';
            font-size: 16px;
        }

        .top-a{
            width: 100%;
            background-color: black;
            box-sizing: border-box;
            float: left;
        }

        .top-a ul{
            width: 300px;
            height: 50px;
            display: flex;
            /* flex-direction: column; */
            justify-content: space-between;
            /* border: solid 1px black; */
            align-items: center;
            box-sizing: border-box;
            float: right;
        }

        .top-a li{
            width: 100px;
            height: 50px;
            line-height: 50px;
            display: flex;
            /* border: solid 2px red; */
        }

        .top-a li:hover{
            background-color: orange;
            cursor: pointer;
        }
        .top-a li>a:hover{
            color: aliceblue;
        }

        .top-a li>a{
            margin: auto;
            color: white;
        }

        .center-father{
            width: 100%;
            height: 3000px;
        }

        .left{
            margin-top: 50px;
            float: left;
            /* margin: 50px; */
            width: 20%;
            height: 500px;
            /*background-color: blue;*/
        }

        /* .center{
            float: left;
            width: 60%;
            height: 800px;
            float: left;
            background-color: chartreuse;
        }
         */
        .center {
            float: left;
            width: 60%;
            height: 1500px;
            float: left;
            /*background-color: chartreuse;*/
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;
            margin-top: 50px;
        }

        .center li{
            width: 300px;
            height: 400px;
            padding-left: 7px;
            padding-top: 7px;
            /* display: flex; */
            border: solid 2px black;
        }

        .center li:hover{
            border: solid 1px red;
        }

        .center img{
            width: 290px;
            height: 260px;
            border: solid 1px black;
            margin: 0px auto;
        }

        .center p{
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }

        .center h4{
            color: gray;
            float: right;
        }

        .right{
            margin-top: 50px;
            float: right;
            width: 20%;
            height: 500px;
            /*background-color: orange;*/
        }

    </style>

    <script language="javascript">
        function autoLoad() {
            if(location.href.indexOf("FindPageCommodityController")==-1){ //判断是否有刷新标记
                location.href=location.href+"FindPageCommodityController";//没有添加标记
                window.location.href = "FindPageCommodityController?currentPage=1";//刷新
            }
            //window.location.href = "ShowCommodityController";
        }
    </script>

</head>
<body onload = "autoLoad()">

<div class="top">
    <div class="top-a">
        <ul>
            <c:if test="${admin!=null}">
                <li style="color: white">欢迎：${admin.username}</li>
                <li><a href="${pageContext.request.contextPath}/AdminLoginOutController">退出</a></li>
            </c:if>
            <c:if test="${admin == null}">
                <li ><a href="login.jsp">登录</a></li>
                <li><a href="register.jsp">注册</a></li>
            </c:if>
            <li><a style="margin-right: 30px;" href="#" target="_blank">更多</a></li>
        </ul>
    </div>
</div>

<div class="center-father">
    <div class="left">

    </div>

    <ul class="center">
        <c:forEach items="${pageBean.list}" var="commodity">
            <li>
                <img src="${commodity.cimg}" /><br>
                <p>商品名称：${commodity.cname}</p>
                <h2>价格：￥${commodity.cprice}</h2>
                <h3>${commodity.cshop}</h3>
                <hr style="width: 290px;" />
                <c:if test="${admin != null}">
                    <a href="DeleteCommodityController?cid=${commodity.cid}">删除</a>
                    <a href="FindOneCommodityController?cid=${commodity.cid}">修改</a>
                </c:if>
                <h4>销量&nbsp;&nbsp;${commodity.csales}</h4>
            </li>
        </c:forEach>
    </ul>

    <div class="right">
        <c:if test="${admin != null}">
            <a href="addCommodity.jsp">添加商品</a><br/>
        </c:if>
        <tr>
            <td colspan="8">
                <%--1.判断是否显示上一页--%>
                <c:if test="${pageBean.currentPage!=1}">
                    <a href="${pageContext.request.contextPath}/FindPageCommodityController?currentPage=${pageBean.lastPage}">
                        上一页
                    </a>
                </c:if>
                <%--2.显示导航的页码数字--%>
                <c:forEach begin="${pageBean.firstPage}" end="${pageBean.endPage}" var="page">
                    <a href="${pageContext.request.contextPath}/FindPageCommodityController?currentPage=${page}">
                        ${page}  &nbsp;
                    </a>
                </c:forEach>
                <%--3.判断是否显示下一页--%>
                <c:if test="${pageBean.currentPage!=pageBean.totalPage}">
                    <a href="${pageContext.request.contextPath}/FindPageCommodityController?currentPage=${pageBean.nextPage}">
                        下一页
                    </a>
                </c:if>
            </td>
        </tr>
    </div>
</div>

</body>
</html>
